<template>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号" ></el-table-column>
    <el-table-column prop="name" label="姓名" ></el-table-column>
    <el-table-column prop="typeName" label="种类" ></el-table-column>
    <el-table-column prop="health" label="健康" ></el-table-column>
    <el-table-column prop="birthday" label="生日"  :formatter="formatter"></el-table-column>
    <el-table-column prop="owner_id" label="主人" width="180"></el-table-column>
    <el-table-column prop="store_id" label="商店" width="180"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">购买</el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<script>
import axios from "axios";
export default {
  name: "SellPet",
  data(){
    return{
      tableData:[],
    }
  }, mounted() {
    const me = this
    axios.get('http://localhost:3000/az').then(function (res) {
      me.tableData = res.data.data
    }).catch(function (err) {
      console.error(err)
    })
  },methods:{
    handleEdit(row) {
      const petid = row.id;
      const petownerid = row.owner_id;
      const petstoreid = this.$store.state.petstore.id;
      const balance = this.$store.state.petstore.balance;
      console.log(petid)
      console.log(petownerid)
      console.log(petstoreid)
      console.log(balance)
      if (balance >= 500){
        axios.get('http://localhost:3000/storebuy', {
          params: {
            petid,
            petstoreid,
            petownerid
          }
        }).then(function (res) {
          console.log(res)
        }).catch(function (err) {
          console.log(err)
        })
      }else {
        this.$message.error('无法购买')
      }
    },
    formatter(row){
      const d =new Date(row.birthday)
      return d.toLocaleDateString()
    }
  }
  ,watch:{

  }
}
</script>

<style scoped>

</style>